<template>
	<view class="shop-list">
		<view class="shop-top" v-if="title">
			<text class="title">{{ title }}</text>
			<view class="switch" @click="switchClick()">三</view>
		</view>


		<!-- 一列展示 -->
		<view class="product-recommend">
			<view class="one-column" v-if="column===0">
				<view class="product-list" v-for="(item,index) in productListData" @click="$emit('clickShop',item)">
					<image :src="'http://127.0.0.1:8002/' + item.fields.pic"></image>
					<view class="product-item">
						<view class="product-item-title">
							{{item.fields.name}}
						</view>
						<view class="attributes">
							<view class="price">
								价格：{{item.fields.price}}
							</view>
							<view class="stock">
								库存：{{item.fields.stock}}
							</view>
							<view class="like-number">
								点赞：{{item.fields.like_num}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 两列展示 -->
			<view class="two-column" v-else-if="column===1">
				<view class="product-list" v-for="(item,index) in productListData" @click="$emit('clickShop',item)">
					<image :src="'http://127.0.0.1:8002/' + item.fields.pic"></image>
					<view class="product-item">
						<view class="product-item-title">
							{{item.fields.name}}
						</view>
						<view class="attributes">
							<view class="price">
								价格：{{item.fields.price}}
							</view>
							<view class="stock">
								库存：{{item.fields.stock}}
							</view>
							<view class="like-number">
								点赞：{{item.fields.like_num}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="load-more" v-if="CategoryProductListLoadMore || RecommendProductListLoadMore" @click="changePage">
			加载更多
		</view>
		<view class="container_load" v-else>
		  没有更多了
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//切换列表菜单的ID
				column: 0,
				showLoadMore: true, // 设置初始状态为显示
			}
		},
		inject: ['page', 'size'],//搜索页面传递的
		name: "shop-list",
		// 该vue页面没有clickShop的具体实现，暴露事件clickShop到外部（谁用这个事件，谁就是外部）
		emits: ['clickShop', 'changePage'],
		// 接收父组件传递的变量（值）
		props: {
			productListData: {
				type: Array, // 将类型指定为Array
				default: () => [] // 提供一个默认值，为空数组
			},
			title: '',
			CategoryProductListLoadMore:{
				type:Boolean
			},
			RecommendProductListLoadMore:{
				type:Boolean
			}
		},
		methods: {
			// 列表展示形式切换
			switchClick() {
				this.column = ++this.column % 2
			},
			changePage() {
				this.page = this.page + 1;
				this.size = 2;
				console.log("ShopList打印页大小：" + this.size)
				// 通过使用 this.$emit，可以在子组件中触发一个自定义事件，并且可以传递数据给父组件
				// 'changePage': 这是自定义事件的名称，可以是任何字符串。父组件在使用子组件时，可以监听这个事件，并在事件触发时执行相应的处理函数。
				this.$emit('changePage', this.page, this.size, true);
			},
		},
		created: function() {

		}
	}
</script>

<style>
	.shop-list {
		position: relative;
	}

	.shop-list .shop-top {
		height: 50px;
		line-height: 50px;
		background-color: #FFF;
		position: relative;
		display: flex;
		justify-content: center;
	}

	.shop-list .shop-top .title {
		display: inline-block;
		position: relative;
		font-weight: bold;
	}

	.shop-list .shop-top .title::before {
		content: "";
		width: 40px;
		height: 1px;
		background-color: black;
		position: absolute;
		left: -60px;
		top: 50%;
	}

	.shop-list .shop-top .title::after {
		content: "";
		width: 40px;
		height: 1px;
		background-color: black;
		position: absolute;
		right: -60px;
		top: 50%;
	}

	.shop-list .shop-top .switch {
		position: absolute;
		background-color: rgba(255, 255, 255, 0.1);
		width: 50px;
		height: 50px;
		right: 0;
		top: 0;
		cursor: pointer;
		text-align: center;
	}



	/* product-recommend 容器样式 */
	.product-recommend {
		display: flex;
		flex-direction: column;
		padding: 20px;
		background-color: #FFF;
	}

	/**
	 * 商品推荐内容循环体
	 */
	/* 单列查看推荐商品*/
	.one-column {
		box-sizing: border-box;
	}

	.one-column .product-list {
		display: flex;
		justify-content: space-between;
	}

	/* 定义左侧的 image 样式，占据 120px 的宽和高 */
	.one-column .product-list image {
		width: 160px;
		height: 160px;
		padding: 5px;
	}

	/* 定义右侧的 content 容器样式，使用 flex-direction 设置为 column，并隐藏 content-name 元素中的 overflow */
	.one-column .product-list .product-item {
		display: flex;
		flex-direction: column;
		width: calc(100% - 180px);
		margin-top: 5px;
	}

	/* 定义右侧的 content-name 元素样式，使其占据整个 content 容器的剩余空间 */
	.one-column .product-list .product-item .product-item-title {
		font-size: 15px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		/* 添加分号 ... 来表示文本内容超出显示范围的部分 */
		text-overflow: ellipsis;
		padding-top: 15px;
	}

	.one-column .product-list .product-item .attributes {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 20px;
		line-height: 20px;
		font-size: 15px;
		margin-top: 5px;
	}

	/**
	 * 双列查看推荐商品
	 */
	.two-column {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.two-column .product-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
		width: calc(50% - 10px);
	}

	.two-column .product-list image {
		width: 100%;
		height: 150px;
		object-fit: cover;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.two-column .product-list .product-item {
		font-size: 14px;
		text-align: left;
		width: 100%;
	}

	.two-column .product-list .product-item .product-item-title {
		font-size: 15px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		/* 添加分号 ... 来表示文本内容超出显示范围的部分 */
		text-overflow: ellipsis;
	}

	.two-column .product-list .product-item .attributes {
		height: 50px;
		line-height: 20px;
		font-size: 15px;
		margin-top: 5px;
	}

	.load-more {
		text-align: center;
		cursor: pointer;
		background-color: #FFF;
		padding: 10px;
	}
	.container_load{
		  display: flex;
		  justify-content: center; 
		  align-items: center; 
		  height: 60rpx;
	}
</style>
